<template>
	<div class="chunk">
		<div class="title">报价方案</div>
		<div class="infoAll">
			<Upstream
				v-if="
					details.carSourceType == '3' &&
					details.outsourcingType == '2'
				"
				ref="Upstream"
				v-model="formData"
				:state="state"
				:type="type"></Upstream>
			<Downstream
				ref="Downstream"
				v-model="formData"
				:state="state"
				:type="type"></Downstream>
			<PricePreview
				v-if="type == 'preview'"
				v-model="formData"
				:state="state"
				:type="type"></PricePreview>
			<PriceForecast
				v-if="type == 'preview' && details.outsourcingType !== '2'"
				v-model="formData"
				:state="state"
				:type="type"></PriceForecast>
			<FormItems
				ref="form1"
				v-model="formData.plan"
				:form="formList"
				:state="state"></FormItems>
			<!-- <el-form -->
			<!-- :model="formData.plan" -->
			<!-- ref="form" -->
			<!-- label-width="80px" -->
			<!-- :inline="false" -->
			<!-- size="normal"> -->
			<!-- <el-form-item label="备注" class="formItem"> -->
			<!-- <el-input -->
			<!-- type="textarea" -->
			<!-- v-model="formData.remark" -->
			<!-- placeholder="请输入备注" -->
			<!-- :autosize="{ minRows: 4, maxRows: 4 }" -->
			<!-- resize="none"></el-input> -->
			<!-- </el-form-item> -->
			<!-- </el-form> -->
		</div>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import Upstream from '@/views/quota/forecast/chunk/carInfoChunk/upstream';
	import Downstream from '@/views/quota/forecast/chunk/carInfoChunk/downstream';
	import PricePreview from '@/views/quota/forecast/chunk/carInfoChunk/pricePreview';
	import PriceForecast from '@/views/quota/forecast/chunk/carInfoChunk/priceForecast';

	export default {
		components: {
			FormItems,
			Upstream,
			Downstream,
			PricePreview,
			PriceForecast,
		},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				type: String,
				required: false,
			},
			env: {
				type: String,
				required: false,
			},
		},
		dicts: [
			'quota_plan_payment_frequency_type',
			'quota_plan_payment_method',
			'quota_plan_bill_type',
			'quota_plan_driver_type',
			'quota_plan_fuel_type',
		],
		inject: ['details_forecast'],
		provide() {
			return {
				dicts: () => this.dict,
			};
		},
		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			details() {
				return this.details_forecast();
			},
			formList() {
				return [
					{
						label: '附件',
						type: 'upload',
						prop: 'planAccessory',
						block: true,
						fitContent: true,
						prototype: {
							upType: 2,
						},
					},
					{
						label: '备注',
						type: 'textarea',
						prop: 'remark',
						block: true,
						fitContent: true,
						minRows: 4,
						maxRows: 4,
					},
				];
			},
		},
		created() {},
		mounted() {},
		methods: {
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chunk {
		margin: 20px;
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-bottom: 15px;
			border-bottom: 1px solid #e9e9e9;
			margin-bottom: 15px;
		}
	}
	.formItem {
		display: flex;
		flex-direction: column;
		::v-deep .el-form-item__label {
			width: 100% !important;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #464646;
			line-height: 22px;
			text-align: left;
			margin-bottom: 8px;
		}
		::v-deep .el-form-item__content {
			margin-left: 0 !important;
			// line-height: normal;
			height: auto !important;
			font-weight: 500;
			color: #333;
		}
	}
	.infoAll {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}
</style>
